<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./css/bootstrap.css">
  <style>
    /*.row{
      background: #000000;
      margin-bottom: 2rem;
    }
    .row div{
      background: #399;
      border:1px solid #000000;
    }*/

  </style>
</head>
<body>
<!--标题，正文，列表 -->
<div class="container">
  <p class="h1">h1. Bootstrap heading</p>
  <p class="h2">h2. Bootstrap heading</p>
  <p class="h3">h3. Bootstrap heading</p>
  <p class="h4">h4. Bootstrap heading</p>
  <p class="h5">h5. Bootstrap heading</p>
  <p class="h6">h6. Bootstrap heading</p>
  <hr>
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>
  <hr/>
  <h1 class="h1">h1. Bootstrap strap heading</h1>
  <h2 class="h2 lead">h2. Bootstrap heading</h2>
  <h3 class="h3">h3. Bootstrap heading</h3>
  <h4 class="h4 ">h4. Bootstrap heading</h4>
  <h5 class="h5">h5. Bootstrap heading</h5>
  <h6 class="h6">h6. Bootstrap heading</h6>
  <hr/>
  <h3>
    Fancy display heading
    <small>With faded secondary text</small>
  </h3><hr/>
  <h3>
    Fancy display heading
    <span class="small">With faded secondary text</span>
  </h3>
  <div>
    Traditional <span class="lead">heading elements are designed</span> to work best in the meat of your page content. When you need a heading to stand out, <span class="mark">consider using a display</span> heading—a larger, slightly more opinionated heading style.
  </div>
  <hr/>
  <ul class="list-inline">
    <li class="list-inline-item"><a href="xxx">Lorem ipsum</a></li>
    <li class="list-inline-item">Phasellus iaculis</li>
    <li class="list-inline-item">Nulla volutpat</li>
  </ul>
  <hr/>
  <dl class="row">

    <dt class="col-sm-3">Malesuada porta</dt>
    <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

    <dt class="col-sm-3 text-truncate">我能不说我是要被断句变逗号的文本么</dt>
    <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  </dl>
</div>


<!--<script src="./js/bootstrap.js"></script>-->
</body>
</html>